<template>
  <div class="sysconfig-comp-ct">
    <el-row :gutter="20" style="height: 100%;">
      <el-col :span="4" style="height: 100%;">
        <el-tree :data="data" node-key="id" default-expand-all @node-drag-end="handleDragEnd" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
        </el-tree>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <div class="gridbox">
          <div class="gridrow" v-for="rowitem in gridrow" :key="rowitem">
            <div v-for="colitem in gridcol" :key="colitem" :class="grid[`${rowitem}${colitem}`].class" class="gridcol" :griddata="`${rowitem}${colitem}`">
              {{ grid[`${rowitem}${colitem}`].content }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'sysconfig',
  data() {
    return {
      gridrow: 3,
      gridcol: 3,
      grid: {
        11: { content: '', class: '' },
        12: { content: '', class: '' },
        13: { content: '', class: '' },
        21: { content: '', class: '' },
        22: { content: '', class: '' },
        23: { content: '', class: '' },
        31: { content: '', class: '' },
        32: { content: '', class: '' },
        33: { content: '', class: '' },
      },

      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {},
  methods: {
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      let doc = document.elementFromPoint(event.x, event.y);
      if (doc.getAttribute('griddata')) {
        this.grid[doc.getAttribute('griddata')].content = `${draggingNode.data.label}`;
        this.grid[doc.getAttribute('griddata')].class = `selected`;
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      return false;
    },
    allowDrag(draggingNode) {
      return true;
    },
  },
};
</script>
<style lang="scss" scoped>
.sysconfig-comp-ct {
  position: relative;
  height: 100%;

  .gridbox {
    height: 100%;
    display: flex;
    flex-direction: column;

    .gridrow {
      flex: 1;
      display: flex;
      flex-direction: row;

      .gridcol {
        flex: 1;
        background: #ccc;
        border: solid 0.5px #000;
        text-align: center;
        line-height: 100%;
      }

      .selected {
        background: #ff0;
      }
    }
  }
}
</style>
